.container {
  background: #e9e9e9;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24rpx;
  .card {
    width: 100%;
    padding: 0 32rpx;
    border-radius: 32rpx;
    box-sizing: border-box;
    background: #ffffff;
    .user {
      width: 100%;
      padding: 32rpx 0;
      box-sizing: border-box;
      border-bottom: 1px solid #e9e9e9;
    }
    .main {
      .date {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24rpx;
        padding: 24rpx 0;
        font-size: 36rpx;
        font-weight: bold;
        image {
          display: block;
          width: 18rpx;
          height: 28rpx;
          &:first-child {
            padding: 10rpx 0 10rpx 30rpx;
          }
          &:last-child {
            padding: 10rpx 30rpx 10rpx 0;
          }
        }
      }
      .data {
        border-radius: 32rpx;
        padding: 24rpx 32rpx;
        box-sizing: border-box;
        background: #f1fefd;
        .none {
          height: 300rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #666666;
        }
        > view {
          display: flex;
          gap: 24rpx;
          flex-direction: column;
          > view {
            font-size: 26rpx;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            > text {
              font-weight: normal;
              &.warn {
                color: #f37364;
              }
            }
          }
          & + view {
            margin-top: 24rpx;
            padding-top: 24rpx;
            border-top: 1px solid #e9e9e9;
          }
        }
      }
      .sumUp {
        padding: 32rpx;
        font-size: 28rpx;
        font-weight: bold;
        > view {
          display: flex;
          justify-content: space-between;
          > view {
            padding: 0 8rpx;
            color: #999999;
            background: #e9e9e9;
            border-radius: 8rpx;
            &.active {
              background: #73f0ea;
              color: #ffffff;
            }
          }
          text {
            color: #f37364;
          }
          > view {
            font-weight: normal;
          }
          & + view {
            margin-top: 24rpx;
          }
        }
      }
    }
  }
  .table {
    margin-top: 24rpx;
    border-radius: 32rpx;
    background: #ffffff;
    overflow: hidden;
    .title {
      height: 124rpx;
      line-height: 92rpx;
      padding: 0 32rpx;
      font-size: 28rpx;
      background: #73f0ea;
      color: #ffffff;
      margin-bottom: -32rpx;
      font-weight: bold;
    }

    .main {
      font-size: 26rpx;
      padding: 0 40rpx;
      background: #ffffff;
      border-radius: 32rpx 32rpx 0 0;
      .th {
        padding: 32rpx 0;
        font-weight: bold;
        &:first-child {
          border-bottom: 1px solid #e9e9e9;
          margin-bottom: 24rpx;
        }
        &:last-child {
          border-top: 1px solid #e9e9e9;
          margin-top: 24rpx;
        }
      }
      .td {
        color: #666666;
      }
      .td,
      .th {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        > view {
          grid-column: span 2;
          &:nth-child(n + 3) {
            grid-column: span 3;
          }
        }
      }
    }
  }
}
